<template>
    <div class="tmpl">
        <nav-bar title="图文分享"/>
        <div class="photo-header">
            <ul>
                <li v-for="(category,index) in categorise" :key="index">
                    <!-- <a href="javascript:;" @click="loadImgsById(category.id)">{{category.title}}</a> -->
                     <a href="javascript:;" @click="navigateToCateById(category.id)">{{category.title}}</a>
                </li>
            </ul>
        </div>
        <div class="photo-list">
            <ul>
                <li v-for="(img,index) in imgs" :key="index">
                    <router-link :to="{name:'PhotoDetail',params:{id:img.id}}">
                        <img v-if="$route.query.categoryId === 0" v-lazy="img.img_url">
                        <img v-else :src="img.img_url">
                        <p>
                            <span>{{img.title}}</span>
                            <br>
                            <span>{{img.zhaiyao}}</span>
                        </p>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            imgs:[], //图片数据
            categorise:[] //分类信息
        }
    },
    //路由的参数改变
    beforeRouteUpdate(to, from, next){
        let {categoryId} = to.query;
        //假如是初次进入，就不需要这个代码
        if(categoryId === 0){
          this.imgs = [];
      }
        //发请求更改页面数据
        this.loadImgsById(categoryId);
        next();
    },
    methods:{
        navigateToCateById(id){
            this.$router.push({
                name:'PhotoList',
                query:{categoryId:id}
            })
        },
        loadImgsById(categoryId){
            //2:发起请求
        this.$axios.get('/getimages/'+categoryId)
        .then(res=>{
            //3:渲染数据
            //console.log(res);
            this.imgs = res.data.message;
        })
        .catch(err=>{
            console.log(err)
        })
        }
    },
    created() {
      //console.log(this.$route.query.categoryId) 
      //1:获取分类id
      let {categoryId} = this.$route.query;
      this.loadImgsById(categoryId);
      //获取分类信息
      this.$axios.get('getimgcategory')
      .then(res=>{
          this.categorise = res.data;
          //加入全部到数组的顶部
          this.categorise.unshift({id:0,title:'全部'});
      })
      .catch(err=>{

      })
      
    },
}
</script>
<style scoped>
.photo-header li{
    list-style: none;
    display: inline-block;
    margin-left: 10px;
    height: 30px;
}
.photo-header ul{
    /*强制不换行*/
    white-space: nowrap;
    overflow-x: auto;
    padding-left: 0px;
    margin: 5px;
}
/*下面的图片*/
.phone-list li{
    list-style: none;
    position: relative;
}
.phone-list li img{
    width: 100%;
    height: 230px;
    vertical-align: top;
}
.phone-list p{
    position: absolute;
    bottom: 0px;
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    margin-bottom: 0px;
}
.phone-list p span:nth-child(1){
    font-weight: bold;
    font-size: 16px;
}
img[lazy=loading]{
    width: 40px;
    height: 300px;
    margin: auto;
}
</style>
